<template>
  <common-page title="重置密码">
    <el-steps :active="stepActive" simple finish-status="success">
      <el-step title="填写新密码" />
      <el-step title="完成重置" />
    </el-steps>
    <el-form
      v-if="stepActive == 0"
      ref="form"
      :model="form"
      :rules="rules"
      :label-width="120"
    >
      <el-form-item label="登录账号" prop="userName">
        <el-input
          v-model="form.userName"
          placeholder="请输入登录账号"
          readonly="true"
        ></el-input>
        <div class="el-form-item-msg">请输入注册时填写的登录账号</div>
      </el-form-item>
      <!--<el-form-item label="手机号码" prop="phone">
				<el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
			</el-form-item>
			<el-form-item label="短信验证码" prop="yzm">
				<div class="yzm">
					<el-input v-model="form.yzm" placeholder="请输入6位短信验证码"></el-input>
					<el-button @click="getYzm" :disabled="disabled">获取验证码<span v-if="disabled"> ({{time}})</span></el-button>
				</div>
			</el-form-item> -->
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          v-model="form.oldPassword"
          show-password
          placeholder="请输入原密码"
        ></el-input>
        <div class="el-form-item-msg">请输入原登录密码</div>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="form.newPassword"
          show-password
          placeholder="请输入新密码"
        ></el-input>
        <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
      </el-form-item>
      <el-form-item label="确认新密码" prop="newpw2">
        <el-input
          v-model="form.newpw2"
          show-password
          placeholder="请再一次输入新密码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">提交</el-button>
      </el-form-item>
    </el-form>
    <el-result
      v-if="stepActive == 1"
      icon="success"
      title="密码重置成功"
      sub-title="请牢记自己的新密码,返回登录后使用新密码登录"
    >
      <template #extra>
        <el-button type="primary" @click="backLogin">返回登录</el-button>
      </template>
    </el-result>
  </common-page>
</template>

<script>
import commonPage from "./components/commonPage";

export default {
  components: {
    commonPage,
  },
  data() {
    return {
      stepActive: 0,
      form: {
        userName: "",
        oldPassword: "",
        newPassword: "",
        newpw2: "",
      },
      rules: {
        // user: [
        // 	{ required: true, message: '请输入登录账号'}
        // ],
        // phone: [
        // 	{ required: true, message: '请输入手机号'}
        // ],
        // yzm: [
        // 	{ required: true, message: '请输入短信验证码'}
        // ],
        oldPassword: [{ required: true, message: "请输入当前账号密码" }],
        newPassword: [{ required: true, message: "请输入新的密码" }],
        newpw2: [
          { required: true, message: "请再次输入新的密码" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.newPassword) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      disabled: false,
      time: 0,
    };
  },
  mounted() {
    var userinfo = this.$TOOL.data.get("USER_INFO");
    this.form.userName = userinfo.loginAccount;
  },
  methods: {
    async getYzm() {
      var validate = await this.$refs.form
        .validateField("phone")
        .catch(() => {});
      if (!validate) {
        return false;
      }

      this.$message.success("已发送短信至手机号码");
      this.disabled = true;
      this.time = 60;
      var t = setInterval(() => {
        this.time -= 1;
        if (this.time < 1) {
          clearInterval(t);
          this.disabled = false;
          this.time = 0;
        }
      }, 1000);
    },
    async save() {
      var validate = await this.$refs.form.validate().catch(() => {});
      if (!validate) {
        return false;
      }
	  var res = await this.$API.courseware.changePassword.post(this.form);
	  if (res.code == 200) {
        this.$emit("success", this.form, this.mode);
        this.visible = false;
        this.$message.success("操作成功");
      } else {
        this.$alert(res.message, "提示", { type: "error" });
      }
      this.stepActive = 1;
    },
    backLogin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style scoped>
</style>
